<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>

    <link href="/styles/base.css" rel="stylesheet" type="text/css">
    <link href="/styles/travelspot.css" rel="stylesheet" type="text/css">
    <link href="/styles/reply.css" rel="stylesheet" type="text/css">
    <link href="/styles/select.css" rel="stylesheet" type="text/css">
    <link href="/js/plugins/jqPaginator/jqPagination.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.min.js"></script>

    <link href="/styles/replyDetail.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <script src="/js/bootstrap/js/bootstrap.js"></script>
    <link type="text/css" rel="stylesheet" href="/js/plugins/uploadifive/uploadifive.css"/>
    <script type="text/javascript" src="/js/plugins/uploadifive/jquery.uploadifive.min.js"></script>


    <script type="text/javascript" src="/js/plugins/jqPaginator/jq-paginator.min.js"></script>

    <script type="text/javascript" src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script type="text/javascript" src="/js/system/guide.js"></script>


</head>

<script>
    $(function () {
        $(".btn-reviews").click(function () {
            $("#myModal").modal('show');
        })

        //提交评论表单
        $(".btn-submit").click(function () {
            $("#scenicForm").ajaxSubmit(function (data) {
                if (data.success) {
                    window.location.reload();
                } else {
                    alert(data.msg);
                }
            })
            /* $.post("/scenic/CommentSave",$("#scenicForm").serialize(),function (data) {
                 alert(data);
             })*/
        })

        /* //评论的评论
         $('.btn_submit_reply').click(function () {
             var id = $(this).prev("textarea").attr("data-commentId");
             var scenicId = $(this).prev("textarea").attr("data-scenicId");
             var type = $(this).prev("textarea").attr("data-type");
             var comment = $(this).prev("textarea").val();
             $.post("/scenic/CommentSave", {id: id, scenicId: scenicId, type: type, comment: comment}, function (data) {
                 if (data.success) {
                     window.location.reload();
                 } else {
                     alert(data.msg);
                 }
             })
         })*/

        //点赞
        $(".useful").click(function () {
            var id = $(this).data("id");
            var b = $(this);
            $.get("/scenic/scenicThumbup", {id: id}, function (data) {
                if (data.result) {
                    b.addClass("on");
                    var a = b.find('span').html();
                    b.find('span').html(parseInt(a) + 1);
                } else {
                    b.removeClass("on");
                    var a = b.find('span').html();
                    b.find('span').html(parseInt(a) - 1);
                }
            })
        })

        //收藏
        $('._j_favpoi').click(function () {
            var id = $(this).data("id");
            var b = $(this);
            $.get("/scenic/favornumChange", {id: id}, function (data) {
                if (data.success) {
                    b.addClass("on");
                    var a = b.find('span').html();
                    b.find('span').html(parseInt(a) + 1);
                } else {
                    b.removeClass("on");
                    var a = b.find('span').html();
                    b.find('span').html(parseInt(a) - 1);
                }
            })
        })

        //去过
        $('.btn-been').click(function () {
            var id = $(this).data("id");
            var b = $(this);
            $.get("/scenic/been", {id: id}, function (data) {
                if (data.success) {
                    b.addClass("on");
                    var a = b.find('span').html();
                    b.find('span').html(parseInt(a) + 1);
                } else {
                    b.removeClass("on");
                    var a = b.find('span').html();
                    b.find('span').html(parseInt(a) - 1);
                }
            })
        })

        //图片上传
        $('.imgBtn').uploadifive({
            'auto': true,    //自动提交
            'uploadScript': '/uploadImg',  //图片上传过来处理路径(接受)
            buttonClass: "btn-link",  //按钮的样式
            'fileObjName': 'pic',  // 图片文件上传之后, 在springmvc 映射方法接受的参数名
            'buttonText': '浏览...',  //按钮上面文字
            'fileType': 'image',   //指定上传的图片
            'multi': false,   //是否为多文件上传, 此处设置单文件
            'fileSizeLimit': 5242880,  //文件上传大小
            'removeCompleted': true, //取消上传完成提示
            'uploadLimit': 1,  //一次允许上传文件个数
            //'queueSizeLimit'  : 10,  //文件上传等待队列大小
            'overrideEvents': ['onDialogClose', 'onError'],    //onDialogClose 取消自带的错误提示
            'onUploadComplete': function (file, data) {

                //data 请求方法处理完之后, 传回来的数据: 约定: 图片的路径(url)
                $("#imgUrl").attr("src", "/" + data);
                $("#commentUrl").val("/" + data);

            },
            onFallback: function () {
                $.messager.alert("温馨提示", "该浏览器无法使用!");
            }
        });

        //要触发的评论函数
        function comment(a) {
            var b = ${scenic.id}
                    console.log(a);
            $.post('/scenic/scenicTpl', {ScenicId: b, type: a}, function (data) {
                $('.rev-list').html(data);
            })
        }

        //异步刷新评论  焦点触发事件
        //mouseover
        $(".commentType").mouseover(function () {
            var a = $(this).data("category");
            $("#type").val(a);
            comment(a);
        })
        //页面刷新时 触发事件
        $("#commentType0").trigger("mouseover");

        //分页的时候 提交表单
        $("#kwSearchForm").ajaxForm(function (data) {
            $('.rev-list').html(data);
        })
    })

</script>

<body>
<#assign currentNav="destination">
<#include "../common/navbar.ftl">
<div id="container">
    <div class="row row-placeTop row-bg">
        <div class="wrapper">
            <div class="extra">
                <div class="action">
                    <a class="_j_favpoi btn-collect" data-id="${(vo.scenicId)!}" target="_blank" title="添加收藏"
                       data-cs-p="收藏">
                        <i class="icon"></i>
                        <span class="txt"> ${(vo.favornum)!}</span>收藏
                    </a>
                    <a class="btn-been" href="javascript:void(0)" data-id="${(vo.scenicId)!}" data-act="set_path">
                        <i class="icon"></i> <span class="txt">${(vo.beennum)!}</span>人去过</a>
                </div>
            </div>


            <div class="crumb">
                <div class="item"><a href="/destination">目的地</a><em>&gt;</em></div>
            <#list toasts as t>
                <div class="item">
                    <div class="drop">
                        <span class="hd"><a href="javascript:;" target="_blank">${(t.name)!}<i></i></a></span>
                        <div class="bd">
                            <i class="arrow"><b></b></i>
                            <div class="col">
                                <h3>热门地区</h3>
                                <ul class="clearfix">
                                    <#list t.children as tc>
                                        <#if tc_index lt 5 >
                                            <li><a href="javascript:;" target="_blank">${tc.name}</a></li>
                                        </#if>
                                    </#list>

                                </ul>
                            </div>
                            <div class="more"><a href="/destination/guide?id=${t.id}" target="_blank">&gt;&gt;更多地区</a>
                            </div>
                        </div>
                    </div>
                    <em>&gt;</em>
                </div>
            </#list>
                <div class="item">
                    <div class="drop">
                        <span class="hd"><a href="javascript:;">${dest.name}<i></i></a></span>
                        <div class="bd">
                            <i class="arrow"><b></b></i>
                            <div class="col">
                                <!--h3>热门国家</h3-->
                                <ul class="clearfix">
                                    <li><a href="#" target="_blank">${dest.name}概况</a></li>
                                    <li><a href="/destination/scenic?destId=${dest.id}" target="_blank">${dest.name}
                                        景点</a></li>
                                    <li><a href="/travel?destId=${dest.id!}" target="_blank">${dest.name}游记</a></li>
                                    <li><a href="/strategy/list?destId=${dest.id!}" target="_blank">${dest.name}攻略</a>
                                    </li>
                                    <li><a href="javascript:;" target="_blank">${dest.name}跟团游</a></li>
                                </ul>
                            </div>
                            <!--div class="more"><a href="#">&gt;&gt;更多国家</a></div-->
                        </div>
                    </div>
                    <em>&gt;</em>
                </div>
                <div class="item cur"><strong>${dest.name}景点</strong></div>
            </div>


            <div class="title" style="position: relative;">
                <h2>${scenic.name}</h2>
                <a class="num-photo" href="javascript:;" target="_blank"></a>
            </div>
            <div class="place-navbar" style="border-top: 0;">
                <div class="navbar-con">
                    <ul class="navbar clearfix navbar-first-level-warper">
                        <li class="navbar-overview city-guide">
                            <a class="navbar-btn" href="/destination/surveyPage?destId=${dest.id}">
                                <i class="navbar-icon"></i><span>概况</span>
                            </a>
                        </li>
                        <li class="navbar-line">
                            <a class="navbar-btn navbar-sales" href="/destination/scenic?destId=${dest.id}">
                                <i class="navbar-icon"></i><span>景点</span>
                            </a>
                        </li>
                        <li class="navbar-line">
                            <a class="navbar-btn" href="/travel?destId=${dest.id!}">
                                <i class="navbar-icon"></i><span>游记</span>
                            </a>
                        </li>
                        <li class="navbar-line">
                            <a class="navbar-btn navbar-local" href="/strategy/list?destId=${dest.id!}">
                                <i class="navbar-icon"></i><span>攻略</span>
                            </a>
                        </li>
                        <li class="navbar-line">
                            <a class="navbar-btn navbar-sales" href="javascript:;">
                                <i class="navbar-icon"></i><span>跟团游</span>
                            </a>
                        </li>
                    </ul>

                </div>
            </div>
            <!-- 快捷导航 S-->
            <div style="height: 60px;">
                <div class="r-nav" id="poi-navbar" data-cs-p="快捷导航">
                    <ul class="clearfix">
                        <li data-scroll="overview" class="on">
                            <a title="概况">概况</a>
                        </li>
                        <li data-scroll="navbar-line">
                            <a title="蜂蜂点评" href="#commentlist">蜂蜂点评<span>(${(vo.replynum)!}人评论)</span></a>
                        </li>


                        <li data-scroll="comment" class="nav-right">
                            <a class="btn-reviews" title="我要点评">我要点评</a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="container" data-cs-t="景点详情页">

    <div data-anchor="overview">
        <div class="row row-picture row-bg">
            <div class="wrapper">
                <div class="bd">
                    <img src="${(scenic.coverUrl)!}"
                         width="750" height="400">
                </div>
            </div>

            <!-- 简介 S -->
            <div class="mod mod-detail" data-cs-p="概况">
            ${(scenic.content)!}
            </div>

            <!-- 内部景点 S -->
            <div data-anchor="subPoilist">
                <div id="pagelet-block-bb456ee5b764682811223f9b8d30739e" class="pagelet-block"
                     data-api=":poi:pagelet:poiSubPoiApi" data-params="{&quot;poi_id&quot;:&quot;25091&quot;}"
                     data-async="1"
                     data-controller="/js/poi/ControllerPoiSubPoi">
                    <div class="mod mod-innerScenic" data-cs-p="其他景点">
                        <div class="mhd">其他景点</div>

                        <div class="mbd">
                            <ul class="clearfix">
                            <#list pageInfo.list as p>
                                <li>
                                    <a href="/scenic/scenicDetail?scenicId=${p.id}" target="_blank">
                                        <img src="${(p.coverUrl)!}"
                                             width="235" height="150">
                                        <span class="num num-top">${p_index+1}</span>
                                        <div class="info">
                                            <h3>${(p.name)}</h3>
                                            <span><em>${(p.replynum)!}</em>人去过</span>
                                        </div>
                                    </a>
                                </li>
                            </#list>
                            </ul>
                        </div>
                        <div class="more more-subpoi">
                            <a class="btn-subpoi" data-page="1">查看更多</a>
                        </div>
                    </div>
                    <style>
                        .mod-innerScenic .more {
                            margin-top: 20px;
                            text-align: center;
                        }

                        .mod-innerScenic .more a {
                            display: inline-block;
                            width: 160px;
                            height: 50px;
                            background-color: #fff;
                            border: 1px solid #fc9c27;
                            line-height: 50px;
                            color: #ff9d00;
                            font-size: 14px;
                            border-radius: 4px;
                            text-align: center;
                        }

                        .mod-innerScenic .num {
                            width: 40px;
                        }
                    </style>
                </div>
            </div>
        </div>
    </div>

    <!--评论-->
    <div data-anchor="commentlist">
        <div id="pagelet-block-15f9d6d9ad9f6c363d2d27120e8a6198" class="pagelet-block"
             data-api=":poi:pagelet:poiCommentListApi" data-params="{&quot;poi_id&quot;:&quot;25091&quot;}"
             data-async="1"
             data-controller="/js/poi/ControllerPoiComment">
            <div class="mod mod-reviews" data-cs-p="评论列表">
                <div class="mhd mhd-large"><a href="javascript:;"
                                              name="commentlist">蜂蜂点评<span>（共有<em>${(vo.replynum)!}</em>条真实评价）</span></a>
                </div>
                <div class="review-nav">
                    <ul class="clearfix">
                        <li data-type="0" class="${(qo.type==0) ?string('on','')}">
                            <span class="divide"></span>
                            <a class="commentType" id="commentType0" data-category="0"
                            <#-- href="/scenic/scenicDetail?type=0&ScenicId=${scenic.id}"-->>
                                <span>全部</span>
                            </a>
                        </li>
                        <li data-type="0" data-category="1" class="${(qo.type==1) ?string('on','')} ">
                            <span class="divide"></span>
                            <a class="commentType" data-category="1"
                            <#--href="/scenic/scenicDetail?type=1&ScenicId=${scenic.id}"-->>
                                <span>有图</span>
                                <span class="num">(${(vo.havePictureReplynum)!})</span>
                            </a>
                        </li>
                        <li data-type="1" data-category="2" class="${(qo.type==2) ?string('on','')}">
                            <span class="divide"></span>
                            <a class="commentType" data-category="2"
                            <#-- href="/scenic/scenicDetail?type=2&ScenicId=${scenic.id}"-->>
                                <span>好评</span>
                                <span class="num">(${(vo.goodReplynum)!})</span>
                            </a>
                        </li>
                        <li data-type="1" data-category="4" class="${(qo.type==3) ?string('on','')}">
                            <span class="divide"></span>
                            <a class="commentType" data-category="3"
                            <#--href="/scenic/scenicDetail?type=3&ScenicId=${scenic.id}"-->>
                                <span>差评</span>
                                <span class="num">(${(vo.badReplynum)!})</span>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="loading-img" style="display: none;"><img
                        src="http://images.mafengwo.net/images/weng/loading3.gif"> Loading...
                </div>
                <div class="_j_commentlist">

                    <form action="/scenic/scenicTpl" method="post" id="kwSearchForm">
                        <input type="hidden" name="currentPage" value="1" id="currentPage">
                        <input type="hidden" name="ScenicId" value="${scenic.id}" id="ScenicId">
                        <input type="hidden" name="type" value="-1" id="type">
                        <input type="hidden" name="pageSize" value="5" id="pageSize">

                        <div class="rev-list">
                        <#--评论插入位置-->

                        </div>

                    </form>


                </div>
            </div>
        </div>
    </div>

</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">景点点评</h4>
            </div>


            <div class="mfw-reviews">
                <div id="_j_commentform_cnt">
                    <h2>
                        <strong>广州塔</strong>
                        <em>*</em>为必填选项
                    </h2>
                    <form action="/scenic/CommentSave" method="post" id="scenicForm" class="_j_commentdialogform"
                          data-typeid="3">
                        <input type="hidden" name="scenicId" value="${scenic.id}">
                        <input type="hidden" id="commentUrl" name="commentUrl" value="">
                        <div class="review-item item-star">
                            <div class="label"><em>*</em>总体评价</div>
                            <div class="review-star _j_rankblock" data-star="" name="rank">
                                <input type="hidden" name="rank" value="" essential="1" data-inputname="总体评价">
                                <span class="_j_starcount star0"></span>
                                <div class="click-star _j_starlist">
                                    <a role="button" title="千万别去" rel="nofollow"></a>
                                    <a role="button" title="不推荐" rel="nofollow"></a>
                                    <a role="button" title="一般般" rel="nofollow"></a>
                                    <a role="button" title="值得一去" rel="nofollow"></a>
                                    <a role="button" title="必须推荐" rel="nofollow"></a>
                                </div>

                            </div>
                            <span class="txt-tips _j_startip">点击星星打分</span>
                        </div>

                        <div class="review-item item-comment">
                            <div class="label"><em>*</em>评价</div>
                            <div class="content">
                                <textarea class="_j_commentarea" name="comment" essential="1" data-inputname="点评内容"
                                          placeholder="详细、客观、真实，130字以上为佳！上传图片会加分哦！" data-minlen="15"
                                          data-maxlen="1000"></textarea>
                                <p class="_j_commentcounttip">15-1000个字</p>
                            </div>
                        </div>

                        <div class="review-item item-photo">
                            <div class="label">上传照片</div>
                            <div class="content">
                                <dl class="upload-box _j_piclist">
                                    <dd data-commentid="" id="_j_addpicbtns" ids="0" style="position: relative;">
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">封面：</label>
                                            <div class="col-sm-6">
                                                <input type="hidden" class="form-control" id="coverUrl" name="coverUrl"
                                                       value="">
                                                <img src="/images/default.jpg" width="100px" id="imgUrl">
                                                <button type="button" class="imgBtn">浏览</button>
                                            </div>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <script type="text/javascript">

                $(function () {
                    $("._j_starlist a").mouseover(function () {
                        var index = $(this).index() + 1;
                        var text = $(this).attr("title");

                        $(this).closest("div").prev().addClass("star" + index);
                        $(this).closest("div").parent().next().html(text);
                    }).mouseout(function () {
                        var index = $(this).index() + 1;
                        var text = $(this).attr("title");
                        $(this).closest("div").prev().removeClass("star" + index);
                        $(this).closest("div").parent().next().html(text);

                        var x = $(this).closest("div").prev().prev().val();
                        if (x == index) {
                            $(this).closest("div").prev().addClass("star" + x);
                        }


                    }).click(function () {
                        var index = $(this).index() + 1;
                        var text = $(this).attr("title");
                        $(this).closest("div").prev().addClass("star" + index);
                        $(this).closest("div").parent().next().html(text);

                        $(this).closest("div").prev().prev().val(index);

                    })
                })

            </script>


            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary btn-submit">提交</button>
            </div>
        </div>
    </div>
</div>



<#include "../common/footer.ftl">
</body>

</html>